<template>
	<view class="OuterBg">
		<view class="user-info flex-col">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar title="推荐返利" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:back-icon-color="percent > 0.5 ? '#000' : '#fff'" :title-color="percent > 0.5 ? '#000' : '#fff'">
				</u-navbar>
			</u-sticky>
			<!-- #endif -->
			<rhead></rhead>
			<!-- 搜索 -->
			<view class="search-input">
				<u-search class="flex-1" v-model="queryObject.goods_keyword" height="72" bg-color="#F4F4F4"
					:show-action="false" :placeholder="$zhTran('请输入要搜索的商品')" @search="handleSearch" />
				<view class="flex m-l-20 white" @click="toFillter">
					<u-icon name="grid" size="40" color="#fff" class="m-r-10"></u-icon>{{$zhTran('筛选')}}
				</view>
			</view>
		</view>
		<view class="tabs-swiper">
			<u-tabs-swiper ref="tabs" :list="tabsList" :current="tabsIndex" :is-scroll="false"
				active-color="rgba(64, 115, 250, 1)" bar-width="60" :bold="false" @change="changeCurrentTab">
			</u-tabs-swiper>
		</view>
		<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无活动数据~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
				<view class="p-l-20 p-r-20" v-if="currentTab['sign'] === tabItem['sign']">
					<view class="actBox p-30 bg-white m-t-20" v-for="item in tabsList[tabIndex].list" :key="item.id"
						@click="clickLook(item)">
						<view class="flex col-top m-b-20">
							<view class="flex m-r-20" style="width: calc(100% - 120rpx);">
								<view class="goods-images">
									<u-image width="100%" height="100%" :src="$getImageUri(item.goods_image)"
										mode="aspectFit" />
								</view>
								<view class="m-l-10">
									<view class="line-2" style="min-height: 100rpx;">{{item.goods_name}}</view>
									<price :content="item.sell_price" main-size="32rpx" minor-size="28rpx" prefix="￥"
										color="rgba(56, 56, 56, 1)">
									</price>
								</view>
							</view>
							<view class="">
								<view class="flex row-right">
									<view class="status" :class="{'status--ending': item.status == 2}">
										{{item.status_desc}}
									</view>
								</view>
								<view class="particbtn flex row-center" v-if="item.join_info == ''"
									@click.native.stop="qcyclick($event,item)">
									{{$zhTran('去参与')}}
								</view>
							</view>
						</view>
						<view class="flex row-around actData p-20" v-if="item.join_info!=''">
							<view>
								<view class="num">{{item.join_info.visit || 0}}</view>
								<view class="desc">{{$zhTran('分享次数')}}</view>
							</view>
							<view>
								<view class="num">{{item.join_info.share_times || 0}}</view>
								<view class="desc">{{$zhTran('浏览次数')}}</view>
							</view>
							<view>
								<view class="num">{{item.join_info.rebate_amount || 0}}</view>
								<view class="desc">{{$zhTran('订单总额')}}</view>
							</view>
							<view>
								<view class="num">{{item.activity_progress|| 0}}</view>
								<view class="desc">{{$zhTran('活动进度')}}</view>
							</view>
						</view>
						<view class="flex row-between">
							<view class="time">{{$zhTran('截止时间')}}：{{item.end_time_desc || ''}}</view>
							<view class="more flex">{{$zhTran('查看')}}
								<u-icon name="arrow-right" size="30" color="rgba(149, 149, 149, 1)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</block>
		</mescroll-uni>


	</view>
</template>

<script>
	import rhead from "./components/rhead.vue";

	import {
		apiactivityLists,
	} from '@/api/rebate'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		components: {
			rhead,
		},
		data() {
			return {
				percent: 0,
				tabsList: [{
					sign: 'join',
					name: this.$zhTran('参与中活动'),
					status_type: 1,
					count: '',
					list: [],
				}, {
					sign: 'unjoin',
					name: this.$zhTran('进行中活动'),
					status_type: 0,
					count: '',
					list: [],
				}, {
					sign: 'all',
					name: this.$zhTran('全部活动'),
					status_type: '',
					count: '',
					list: [],
				}],
				tabsIndex: '0',
				queryObject: {
					goods_keyword: '',
					status: '',
					been_rebate_type: '',
					join_type: '',
				}
			}
		},
		computed: {
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		methods: {
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.queryObject = {
					goods_keyword: '',
					status: '',
					been_rebate_type: '',
					join_type: '',
				}
				this.refreshOrderData()
			},
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 初始化Mescroll
			mescrollInit(mescroll) {
				console.log(mescroll);
				this.mescroll = mescroll;
			},
			// 搜索
			handleSearch(value) {
				this.$set(this.queryObject, "goods_keyword", value);
				this.mescroll && this.mescroll.resetUpScroll();
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				apiactivityLists({
					...this.queryObject,
					status_type: this.currentTab.status_type,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					console.log(tab)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			onPageScroll(e) {
				const top = uni.upx2px(100)
				const {
					scrollTop
				} = e
				this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			},
			clickLook(row) {
				this.$Router.push({
					path: `/bundle2/pages/rebate/activdetail?id=${row.id}`
				})
			},
			// 去参与
			qcyclick(e, row) {
				e.preventDefault(); // 阻止事件冒泡穿透
				this.$Router.push({
					path: `/bundle2/pages/goods_detail/goods_detail?id=${row.goods_id}`
				})
			},
			toFillter() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/rebate/filtrate",
					events: {
						receiveData(res) {
							that.queryObject = res
							that.refreshOrderData()
						}
					},
					success(res) {
						res.eventChannel.emit("receiveData", {
							queryObject: that.queryObject,
							status_type: that.currentTab.status_type,
						});
					}
				});
			}
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.refreshOrderData()
		},
	}
</script>

<style lang="scss" scoped>
	@import "./css/tlist.scss";

	.user-info {
		background-color: rgba(64, 115, 250, 1);
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		&.u-skeleton-rect {
			height: 518rpx;
		}

	}

	.search-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
	}

	.actBox {
		border-radius: 10rpx;

		.goods-images {
			width: 140rpx;
			height: 140rpx;
		}

		.status {
			border-radius: 6rpx;
			background-color: rgba(242, 246, 255, 1);
			color: rgba(64, 115, 250, 1);
			width: 100rpx;
			text-align: center;
			padding: 3rpx 0;

			&--ending {
				background-color: #ffeef0;
				color: rgba(245, 36, 65, 1);
			}
		}

		.particbtn {
			width: 156rpx;
			height: 50rpx;
			border-radius: 200px;
			background: linear-gradient(90deg, rgba(255, 88, 51, 1) 0%, rgba(238, 14, 38, 1) 100%);

			font-size: 26rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
			margin-top: 54rpx;
		}

		.actData {
			background-color: rgba(242, 246, 255, 1);
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.num {
				color: rgba(64, 115, 250, 1);
				text-align: center;
			}

			.desc {
				color: rgba(149, 149, 149, 1);
				text-align: center;
				margin-top: 10rpx;
			}
		}

		.time {
			color: rgba(149, 149, 149, 1);
		}

		.more {
			color: rgba(149, 149, 149, 1);
		}
	}
</style>